import { Modal, Form, Input, Button, Space, message, Radio, Select } from 'antd'
import http from '../api/http'
import type { IEvaluate } from '../types/evaluate'
import type { FormInstance } from 'antd'
import { useEffect, useState } from 'react'
import dayjs from 'dayjs'

// 运动类型选项
const sportTypeOptions = [
  { id: '有氧运动', name: '有氧运动' },
  { id: '无氧运动', name: '无氧运动' },
  { id: '柔韧性运动', name: '柔韧性运动' },
  { id: '平衡运动', name: '平衡运动' }
]

// 运动强度选项
const intensityOptions = [
  { id: '低', name: '低' },
  { id: '中', name: '中' },
  { id: '高', name: '高' }
]

interface Props {
  isModalOpen: boolean
  handleCancel: () => void
  onSuccess: () => void
}

const Add: React.FC<Props> = ({ isModalOpen, handleCancel, onSuccess }) => {
  const [form] = Form.useForm<FormInstance<any>>()

  // 重置表单
  useEffect(() => {
    if (!isModalOpen) {
      form.resetFields()
    }
  }, [form, isModalOpen])

  // 提交表单
  const handleSubmit = () => {
    form.validateFields()
      .then(values => {
        // 构建运动项目表提交数据
        const submitData = {
          ...values,
          id: 0, // 新增数据ID为0
          createtime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
          updatetime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
        }

        // 调用运动项目表添加接口
        http.post('sportsitem', submitData)
          .then(() => {
            message.success('添加成功')
            handleCancel()
            form.resetFields()
            onSuccess()
          })
          .catch(err => {
            console.error('添加失败:', err)
            message.error('添加失败，请重试')
          })
      })
      .catch(info => {
        console.log('表单验证失败:', info)
        message.warning('请完善必填字段')
      })
  }

  return (
    <Modal
      title="添加运动项目"
      open={isModalOpen}
      onCancel={handleCancel}
      centered
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={handleSubmit}>
          确认添加
        </Button>
      ]}
      width={600}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{ 
          type: '有氧运动',
          intensity: '中',
          status: 1 // 默认启用状态
        }}
      >
        <Space style={{ width: '100%' }}>
          <Form.Item
            name="code"
            label="运动编码"
            rules={[{ required: true, message: '请输入运动编码' }]}
            style={{ flex: 1, marginRight: 16 }}
          >
            <Input placeholder="如：YD001" />
          </Form.Item>

          <Form.Item
            name="name"
            label="运动名称"
            rules={[{ required: true, message: '请输入运动名称' }]}
            style={{ flex: 2 }}
          >
            <Input placeholder="请输入运动项目名称" />
          </Form.Item>
        </Space>

        <Space style={{ width: '100%' }}>
          <Form.Item
            name="type"
            label="运动类型"
            rules={[{ required: true, message: '请选择运动类型' }]}
            style={{ flex: 1, marginRight: 16 }}
          >
            <Radio.Group>
              {sportTypeOptions.map(type => (
                <Radio key={type.id} value={type.id}>
                  {type.name}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="intensity"
            label="运动强度"
            rules={[{ required: true, message: '请选择运动强度' }]}
            style={{ flex: 1 }}
          >
            <Radio.Group>
              {intensityOptions.map(intensity => (
                <Radio key={intensity.id} value={intensity.id}>
                  {intensity.name}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>
        </Space>

        <Space style={{ width: '100%' }}>
          <Form.Item
            name="duration"
            label="建议时长(分钟)"
            rules={[
              { required: true, message: '请输入建议时长' },
              { type: 'number', min: 1, message: '时长不能小于1分钟' }
            ]}
            style={{ flex: 1, marginRight: 16 }}
          >
            <Input placeholder="单次运动建议时长" type="number" />
          </Form.Item>

          <Form.Item
            name="calorie"
            label="消耗热量(千卡/小时)"
            rules={[
              { required: true, message: '请输入消耗热量' },
              { type: 'number', min: 1, message: '热量不能小于1千卡' }
            ]}
            style={{ flex: 1 }}
          >
            <Input placeholder="每小时消耗热量" type="number" />
          </Form.Item>
        </Space>

        <Form.Item
          name="suitable"
          label="适用人群"
          rules={[{ required: true, message: '请输入适用人群' }]}
        >
          <Input placeholder="如：健康成年人、老年人等" />
        </Form.Item>

        <Form.Item
          name="attention"
          label="注意事项"
          rules={[{ required: true, message: '请输入注意事项' }]}
        >
          <Input.TextArea rows={3} placeholder="请输入运动注意事项" />
        </Form.Item>

        <Form.Item
          name="description"
          label="运动说明"
          rules={[{ required: true, message: '请输入运动说明' }]}
        >
          <Input.TextArea rows={3} placeholder="请输入运动项目说明" />
        </Form.Item>

        <Form.Item
          name="status"
          label="状态"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Radio.Group>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          name="remark"
          label="备注"
        >
          <Input.TextArea rows={2} placeholder="请输入备注信息（可选）" />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export { Add }